<template>
  <div class="info-panel">
    <h4>节点信息</h4>
    <div class="labels">
        <span v-for="(count, label) in nodeLabels" :key="label" class="tag" :style="{backgroundColor: getNodeColor(label)}">
            {{ label }} ({{ count }})
        </span>
    </div>
    
    <h4>关系信息</h4>
     <div class="labels">
        <span v-for="(count, type) in relationshipTypes" :key="type" class="tag relation-tag">
            {{ type }} ({{ count }})
        </span>
    </div>

    <h4>统计</h4>
    <p>Displaying {{ nodeCount }} nodes, {{ edgeCount }} relationships.</p>
  </div>
</template>

<script setup>
import { useGraphStore } from '../stores/graphStore';
import { storeToRefs } from 'pinia';

const store = useGraphStore();
const { nodeCount, edgeCount, nodeLabels, relationshipTypes } = storeToRefs(store);

// 和后端颜色保持一致
function getNodeColor(label) {
    switch (label) {
        case 'DiseaseName': return '#F08080';
        case 'DiseaseClass': return '#20B2AA';
        case 'QualitativeDes': return '#87CEEB';
        case 'QuantitativeDes': return '#FFA07A';
        default: return '#D3D3D3';
    }
}
</script>

<style scoped>
.info-panel {
    padding: 10px;
    font-size: 14px;
    background-color: #fafafa;
}
h4 {
    margin-top: 15px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tag {
    padding: 3px 8px;
    border-radius: 10px;
    color: white;
    font-size: 12px;
}
.relation-tag {
    background-color: #8c8c8c;
}
p {
    margin-top: 15px;
}
</style>